import { Fragment, useCallback, useRef, useState } from "react";

export default function Timer(){
  const [time,setTime] = useState(0);
  const timer = useRef(null);

  const handleStart = useCallback(()=>{
    window.clearInterval(timer.current);
    timer.current = window.setInterval(()=>{
      setTime((time)=> time + 1);
    },100);
  },[]);

  const handlePause = useCallback(()=>{
    console.log(timer.current)
    window.clearInterval(timer.current);
    timer.current = null
  },[])

  return (
    <Fragment>
      <div>
        {time / 10} secounds.
        <br />
        <button onClick={handleStart}>Start</button>
        <button onClick={handlePause}>Pause</button>
      </div>
    </Fragment>
  )
}